<template>
	<div class="demo-block" :class="[blockClass, { 'hover': hovering }]" @mouseenter="hovering = true" @mouseleave="hovering = false">
		<slot name="source"></slot>
		<div class="meta" ref="meta">
			<div class="description" v-if="$slots.default">
				<slot></slot>
			</div>
			<slot name="highlight"></slot>
		</div>
		<div class="demo-block-control" ref="control" :class="{ 'is-fixed': fixedControl }" @click="isExpanded = !isExpanded">
			<transition name="arrow-slide">
				<i :class="[iconClass, { 'hovering': hovering }]"></i>
			</transition>
			<transition name="text-slide">
				<span v-show="hovering">{{ content }}</span>
			</transition>
		</div>
	</div>
</template>

<style lang="scss">
	.demo-block {
		border-radius: 3px;
		transition: .2s;
		code {
			font-family: Menlo, Monaco, Consolas, Courier, monospace;
		}

		.demo-button {
			float: right;
		}

		.source {
			padding: 24px;
		}

		.meta {
			overflow: hidden;
			height: 0;
			transition: height .2s;
		}

		.description {
			box-sizing: border-box;
			border-radius: 3px;
			font-size: 14px;
			line-height: 22px;
			color: #666;
			word-break: break-word;
			background-color: #fff;

			p {
				margin: 0;
				line-height: 26px;
			}

			code {
				color: #5e6d82;
				background-color: #e6effb;
				margin: 0 4px;
				display: inline-block;
				padding: 1px 5px;
				font-size: 12px;
				border-radius: 3px;
				height: 18px;
				line-height: 18px;
			}
		}

		.highlight {
			pre {
				margin: 0;
			}

			code.hljs {
				margin: 0;
				border: none;
				max-height: none;
				border-radius: 0;

				&::before {
					content: none;
				}
			}
		}

		.demo-block-control {
			border-top: solid 1px #eaeefb;
			height: 44px;
			box-sizing: border-box;
			background-color: #fff;
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			text-align: center;
			margin-top: -1px;
			color: #d3dce6;
			cursor: pointer;
			position: relative;

			&.is-fixed {
				position: fixed;
				bottom: 0;
				width: 868px;
			}

			i {
				font-size: 16px;
				line-height: 44px;
				transition: .3s;
				&.hovering {
					transform: translateX(-40px);
				}
			}

			> span {
				position: absolute;
				transform: translateX(-30px);
				font-size: 14px;
				line-height: 44px;
				transition: .3s;
				display: inline-block;
			}

			&:hover {
				color: #409EFF;
				background-color: #f9fafc;
			}

			& .text-slide-enter,
			& .text-slide-leave-active {
				opacity: 0;
				transform: translateX(10px);
			}

			.control-button {
				line-height: 26px;
				position: absolute;
				top: 0;
				right: 0;
				font-size: 14px;
				padding-left: 5px;
				padding-right: 25px;
			}
		}
	}
</style>

<script type="text/babel">
	export default {
		data() {
			return {
				hovering: false,
				isExpanded: this.expanded,
				fixedControl: false,
				scrollParent: null
			};
		},

		props: {
			expanded: {
				type: Boolean,
				default: false
			},
			content: {
				type: String,
				default: '更多内容'
			}
		},

		mounted () {
			this.codeArea.style.height = this.expanded ? `${ this.codeAreaHeight + 1 }px` : '0';
		},

		methods: {
			scrollHandler() {
				const { top, bottom, left } = this.$refs.meta.getBoundingClientRect();
				this.fixedControl = bottom > document.documentElement.clientHeight &&
					top + 44 <= document.documentElement.clientHeight;
				this.$refs.control.style.left = this.fixedControl ? `${ left }px` : '0';
			},

			removeScrollHandler() {
				this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler);
			}
		},

		computed: {
			blockClass() {
				return `demo-${ this.lang } demo-${ this.$router.currentRoute.path.split('/').pop() }`;
			},

			iconClass() {
				return this.isExpanded ? 'el-icon-caret-top' : 'el-icon-caret-bottom';
			},

			codeArea() {
				return this.$el.getElementsByClassName('meta')[0];
			},

			codeAreaHeight() {
				if (this.$el.getElementsByClassName('description').length > 0) {
					return this.$el.getElementsByClassName('description')[0].clientHeight;
				}
			}
		},

		watch: {
			isExpanded(val) {
				this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0';

				if (!val) {
					this.fixedControl = false;
					this.$refs.control.style.left = '0';
					this.removeScrollHandler();
					return;
				}
				setTimeout(() => {
					this.scrollParent = document.querySelector('.page-component__scroll > .el-scrollbar__wrap');
					this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler);
					this.scrollHandler();
				}, 200);
			}
		},

		beforeDestroy() {
			this.removeScrollHandler();
		}
	};
</script>
